<template>
	<view class="content">
		<view class="list-item" v-for="(item,index) in redList" :key="index">
			<view class="list-item-no">订单号：{{item.order_no}}</view>
			<view class="list-item-cont flex f-a-center">
				<image class="list-item-cont-icon" src="../../static/images/lottery_draw/getRed_icon.png"></image>
				<view class="list-item-cont-info">
					<view class="list-item-cont-info-text flex f-a-center">
						<text class="text">领取红包人数</text>
						<text class="num">{{item.receive_state.limit}}</text>
						<text class="btn" :class="{canTake:item.receive_state.state == 1}" @tap="takeBtn(item.id,item.receive_state.state)">{{item.receive_state.state_text}}</text>
					</view>
					<view class="list-item-cont-info-text flex f-a-center">
						<view class="text">距离领取时间</view>
						<!-- <ydtCountDown fontColor="#FFFFFF" splitorColor="#333333" bgrColor="#f85c5a" :timer="team_end_time"></ydtCountDown> -->
						<uni-countdown :second="item.takeTime && item.share_time.share_state == 1?item.takeTime:0" :show-colon="false" :show-day="false" @timeup="timeup" />
					</view>
					<view class="list-item-cont-info-text flex f-a-center" :data-ss="item.failTime">
						<view class="text">红包失效时间</view>
						<!-- <ydtCountDown fontColor="#FFFFFF" splitorColor="#333333" bgrColor="#f85c5a" :timer="team_end_time"></ydtCountDown> -->
						<uni-countdown :second="item.failTime && item.share_packet_state == 0?item.failTime:0" :show-colon="false" :show-day="false" @timeup="timeup" />
					</view>
				</view>
			</view>
		</view>
		<mix-load-more :status="loadMoreStatus"></mix-load-more>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
	    data() {
	        return {
	            redList:[],
				page:1,
				total_pages:1,
				loadMoreStatus:1,
				team_end_time:'2020-07-18 15:16:33'
	        }
	    },
		methods:{
			takeBtn(draw_id,state){
				let that = this
				if(state == 0) return false
				jewel.get('Lottery/obtain_share_pid_youpin',{draw_id:draw_id},true, function(res){
					jewel.showToast(res.data.msg,res.data.code==0?1500:3000)
					if(res.data.code == 0){
						uni.showLoading({
							title:'加载中...'
						})
						setTimeout(()=>{
							uni.hideLoading()
							that.page = 1
							that.getList('load')
						},1000)
					}
				})
			},
			timeup(){
				this.page = 1
				this.getList('load')
			},
			getList(type){
				let that = this
				if(type == 'load') that.redList = []
				that.loadMoreStatus = 1
				if(that.total_pages == 0) that.total_pages = 1
				if(that.page <= that.total_pages){
					jewel.get('Lottery/share_list',{member_id:uni.getStorageSync('userInfo').member_id,page:that.page},true, function(res){
						if(type == 'loadMore'){
							that.redList = that.redList.concat(res.data.data)
							that.changeDate()
						}else{
							that.redList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages <= 1?2:0
							that.changeDate()
						}
						uni.stopPullDownRefresh()
					});
				}else{
					that.loadMoreStatus = 2
				}
			},
			GetDateDiff(startTime, endTime, diffType) {
			    //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式 
			    startTime = startTime.replace(/\-/g, "/");
			    endTime = endTime.replace(/\-/g, "/");
			    //将计算间隔类性字符转换为小写
			    diffType = diffType.toLowerCase();
			    var sTime =new Date(startTime); //开始时间
			    var eTime =new Date(endTime); //结束时间
			    //作为除数的数字
			    var timeType =1;
			    switch (diffType) {
			        case"second":
			            timeType =1000;
			        break;
			        case"minute":
			            timeType =1000*60;
			        break;
			        case"hour":
			            timeType =1000*3600;
			        break;
			        case"day":
			            timeType =1000*3600*24;
			        break;
			        default:
			        break;
			    }
			    return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(timeType));
			},
			changeDate(){
				let that = this
				for(let i in that.redList){
					let start = that.redList[i].share_time.share_start_time
					let end = that.redList[i].share_time.share_end_time
					that.redList[i].takeTime = that.GetDateDiff(start,end,'second')
					let start_p = that.redList[i].share_packet_time.share_packet_start_time
					let end_p = that.redList[i].share_packet_time.share_packet_end_time
					if(end_p != 0) {
						that.redList[i].failTime = that.GetDateDiff(start_p,end_p,'second')
			
					}
				}
				
			}
		},
		onLoad() {
			this.getList('load')
		},
		onReachBottom() {
			this.page++
			this.getList('loadMore')
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList('load')
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #ededed;
	}
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	/deep/ .uni-countdown__number{
		width: 44rpx !important;
		height: 44rpx;
		line-height: 44rpx;
		margin: 0;
		border: 0;
		padding: 0;
		text-align: center;
		background-color: #f85c5a !important;
		color: #FFFFFF !important;
		border-radius: 5px;
	}
	/deep/ .uni-countdown__splitor{
		width: 44rpx !important;
		height: 44rpx;
		line-height: 44rpx;
		padding: 0;
		text-align: center;
	}
	.list-item{
		background-color: #FFFFFF;
		padding: 0 35rpx;
		border-top: 10rpx solid #ededed;
		&-no{
			font-size: 30rpx;
			color: #808080;
			line-height: 65rpx;
			border-bottom: 1px solid #f3f3f3;
		}
		&-cont{
			padding: 20rpx 0;
			&-icon{
				width: 170rpx;
				height: 170rpx;
				margin-right: 22rpx;
			}
			&-info{
				color: #333333;
				font-size: 30rpx;
				&-text:first-child{
					margin-bottom: 15rpx;
				}
				.text{
					margin-right: 30rpx;
				}
				.num{
					color: #d31311;
					font-size: 36rpx;
					font-weight: bold;
					width: 120rpx;
				}
				.btn{
					width: 160rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					border-radius: 50px;
					background-color: #cdcdcd;
				}
				.canTake{
					background-color: #d31311;
				}
			}
		}
	}
</style>
